<template>
  <div ref="chart" style="width: 600px; height: 400px;margin-top: 150px;"></div>
</template>

<script>
  import * as echarts from 'echarts';
  import goods from "@/api/flea/goods";

  export default {
    data() {
      return {
        chartOption: null,
        shumaCount:null,
        sportCount:null,
        bookCount:null,
        otherCount:null
      };
    },
    mounted() {
      this.getInfo();
    },
    methods: {
      async  getInfo(){

        try {
          // 使用 Promise.all() 并行获取所有数据
          await Promise.all([
            goods.getCountByCategory("数码产品").then(response=>{
              this.shumaCount=response.data.count;
            }),
            goods.getCountByCategory("体育用品").then(response=>{
              this.sportCount=response.data.count;
              console.log(this.sportCount+"aaaaaaaaaaaaaaaaaaaaa")
            }),
            goods.getCountByCategory("书籍报刊").then(response=>{
              this.bookCount=response.data.count;
            }),
            goods.getCountByCategory("其他二手").then(response=>{
              this.otherCount=response.data.count;
            }),
          ]);
          this.initChart();
        } catch (error) {
          console.error('数据获取失败:', error);
        }
      },


      initChart() {



        const chart = echarts.init(this.$refs.chart);

        // 柱状图
        const barChartOption = {
          title: {
            text: '柱状图示例',
          },
          tooltip: {},
          legend: {
            data: ['销量'],
          },
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        };
        chart.setOption(barChartOption);

        // 条形图
        const barChartOption2 = {
          title: {
            text: '跳蚤市场数据',
          },
          tooltip: {},
          legend: {
            data: ['条形数据','线性数据'],
          },
          xAxis: {
            data: ['数码产品', '体育用品', '书籍报刊', '其他二手'],
          },
          yAxis: {},
          series: [
            {
              name: '条形数据',
              type: 'bar',
              data: [this.shumaCount, this.sportCount, this.bookCount, this.otherCount],
            },

            {
              name: '线性数据',
              type: 'line',
              data: [this.shumaCount, this.sportCount, this.bookCount, this.otherCount],

            },
          ],
        };
        chart.setOption(barChartOption2);

        // 折线图
        const lineChartOption = {
          title: {
            text: '折线图示例',
          },
          tooltip: {},
          legend: {
            data: ['销量'],
          },
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'line',
              data: [5, 20, 36, 10, 10, 20],
            },


          ],
        };
        chart.setOption(lineChartOption);

        // 扇形图
        const pieChartOption = {
          title: {
            text: '扇形图示例',
          },
          tooltip: {},
          legend: {
            data: ['销量'],
          },
          series: [
            {
              name: '销量',
              type: 'pie',
              radius: '55%',
              data: [
                { value: 335, name: '衬衫' },
                { value: 310, name: '羊毛衫' },
                { value: 234, name: '雪纺衫' },
                { value: 135, name: '裤子' },
                { value: 1548, name: '高跟鞋' },
                { value: 748, name: '袜子' },
              ],
            },
          ],
        };
        chart.setOption(barChartOption2);
      },
    },
  };
</script>
